<template>
  <!-- 用户主页布局 -->
  <el-row class="layout" :gutter="18">
    <!-- 左侧边栏 -->
    <el-col :span="7" class="sidebar-wrapper">
      <el-card class="box-card sidebar-box-card">
        <slot name="sidebar"></slot>
      </el-card>
    </el-col>
    <!-- 右内容 -->
    <el-col :span="17" class="content-wrapper">
      <!-- <el-card class="box-card"> -->
      <slot name="content"></slot>
      <!-- </el-card> -->
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "UserLayout",
  data() {
    return {

    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.layout {
  min-height: 100%;
}

.sidebar-wrapper {
  height: 100%;

  .sidebar-box-card {
    height: 100%;
  }
}

.content-wrapper {
  height: 100%;
}
</style>